<template>
  <div>
    <!-- 上面的导航栏 -->
    <van-nav-bar title="城市列表" left-arrow @click-left="$router.back()"> </van-nav-bar>
    <!-- 下面的列表区域 -->
    <van-index-bar :index-list="indexList">
      <van-index-anchor index="#">当前城市</van-index-anchor>
      <van-cell title="上海" />

      <van-index-anchor index="热">热门城市</van-index-anchor>
      <van-cell :title="item" v-for="(item, index) in hotCity" :key="index+99" />

      <van-index-anchor
        :index="item"
        v-for="(item, index) in indexList.slice(2)"
        :key="index"
        >{{item}}
        <van-cell :title="str.label"
        v-for="(str,index) in allList.filter(str=>str.short===item)"
        :key="index"
        style="margin-left:-17px;"
        />
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
import { cityListAPI, hotCityApi } from '@/api'

export default {
  name: 'City',
  data () {
    return {
      indexList: ['\u000A#', '\u000A热'],
      cityStr: [],
      hotCity: [],
      allList: []
    }
  },
  async created () {
    const res = await cityListAPI({
      level: 1
    })
    console.log(res)
    this.allList = res.data.body
    console.log(this.allList)
    res.data.body.forEach((item) => {
      item.short = item.short.slice(0, 1).toUpperCase()
      this.indexList.push(item.short)
    })
    this.indexList = [...new Set(this.indexList)]
    console.log(this.indexList)
    this.indexList.sort()

    const hotC = await hotCityApi()
    console.log(hotC)
    hotC.data.body.forEach((item) => {
      this.hotCity.push(item.label)
    })
    console.log(this.hotCity)
  }
}
</script>

<style scpoed>
.van-cell {
  font-size: 16px;
}
</style>
